<template>
  <a-modal
    title="操作"
    style="top: 100px;"
    :width="1200"
    v-model="editVisible"
    :maskClosable=false
    :bodyStyle="{ 'max-height': '500px', overflow: 'scroll' }"
    :confirmLoading="confirmLoading"
  >
    <a-card :bordered="false">
      <a-table
        ref="stable"
        :columns="columns"
        :dataSource="cateList"
        :loading="loading"
        :rowKey="row => row.id"
        :pagination="false"
      >
        <span slot="action" slot-scope="text, record">
          <a @click="handlePermission(record)" v-if="!record.kpdl">制定考评项</a>
        </span>
      </a-table>
      <par-exam-item ref="examItemModel" @success="afterClose"></par-exam-item>
    </a-card>
    <template slot="footer">
      <a-button key="back" @click="cancelHandel">
        关闭
      </a-button>
    </template>
  </a-modal>
</template>

<script>
import { STable } from '@/components'
import { queryCate } from '@/api/parExamPlan'
import ParExamItem from '@/views/par/examPlan/ParExamItem'

export default {
  name: 'Rolelist',
  components: {
    STable,
    ParExamItem
    // RoleAuth,
  },
  data () {
    return {
      // 编辑弹出框
      pagination: {
        total: 0,
        pageSize: 5, // 每页中显示5条数据
        showSizeChanger: true,
        pageSizeOptions: ['5', '10', '20', '50'], // 每页中显示的数据
        showTotal: total => `共有 ${total} 条数据` // 分页中显示总的数据
      },
      loading: true,
      param: {},
      type: '',
      queryParam: {
        kpjhbid: '',
        pageNo: 1, // 第几页
        pageSize: 5// 每页中显示数据的条数
      },
      // 查询参数
      editVisible: false,
      cateList: [],
      confirmLoading: false,
      // 表头
      columns: [
        {
          title: '工作分类',
          dataIndex: 'kpdlname',
          ellipsis: true
        },
        {
          title: '考评项目',
          dataIndex: 'kpxm',
          ellipsis: true,
          customRender: function (text, record) {
            if (record.kpgzfl === undefined) {
              return record.kpdlname
            } else {
              return text
            }
          }
        },
        {
          title: '操作', dataIndex: 'action', scopedSlots: { customRender: 'action' }
        }
      ]
      /* // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return queryCate(parameter).then(res => {
          return res.result
        })

        /!* return queryCate(this.record).then(res => {
          return res.result
        }) *!/
      } */
    }
  },
  methods: {
    // 加载数据方法
    loadData (parameter) {
      this.loading = true
      queryCate(parameter).then(res => {
        this.cateList = res.result.data
        const pagination = { ...this.pagination }
        pagination.total = res.result.totalCount
        this.pagination = pagination
        this.loading = false
      })
    },
    handleTableChange (pagination) {
      this.pagination.current = pagination.current
      this.pagination.pageSize = pagination.pageSize
      this.queryParam.pageNo = pagination.current
      this.queryParam.pageSize = pagination.pageSize
      this.loadData(this.queryParam)
    },
    begin: function (record, type) {
      this.type = type
      this.editVisible = true
      this.queryParam.kpjhbid = record.id
      this.param = record
      this.loadData(this.queryParam)
    },
    handlePermission (record) {
      // record.kpdl = this.param.kpdl
      record.dwlx = this.param.dwlx
      this.$refs.examItemModel.begin(record, this.type)
    },
    /**
     * 关闭弹出框
     */
    close () {
      this.editVisible = false
      this.cateList = []
      this.pagination = {
        total: 0,
        current: 1,
        pageSize: 5, // 每页中显示5条数据
        showSizeChanger: true,
        pageSizeOptions: ['5', '10', '20', '50'], // 每页中显示的数据
        showTotal: total => `共有 ${total} 条数据` // 分页中显示总的数据
      }
    },
    /**
     * 取消操作
     */
    cancelHandel () {
      this.close()
    },
    afterClose (selectInfo) {
      this.loadData(this.queryParam)
    }
  }
}
</script>
<style scoped>
</style>
